<template>
  <view class="tags">
    <view class="tag" v-for="(tag,key) in options" @tap="select(tag)" :key="key" :class="{ active: value===tag }">
      {{ tag }}
    </view>
  </view>
</template>

<script>
export default {
  emit: ['input', 'change'],
  props: {
    options: {
      default: () => []
    },
    value: {
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {
    select(val) {
      if (val) {
        this.$emit('input', val)
        this.$emit('change', val)
      } else {
        this.$emit('input', '')
        this.$emit('change', '')
      }


    }
  }
}
</script>

<style lang="scss" scoped>
.tags {
  display: flex;
  margin: 20rpx 0;

  .tag {
    height: 50rpx;
    line-height: 50rpx;
    padding: 0 20rpx;
    border-radius: 50rpx;
    background: $page-color-base;
    margin-right: 20rpx;

    &.active {
      border: 1rpx solid $theme;
      color: $theme;
    }
  }
}
</style>